<template>
	<view>
		<navigationBar backType="1" bg-type="5" navigationTitle="商家入驻" />
		<view class="content">
			<bgImg />
			<!-- {{$xcxImg('/business/abg.png')}} -->
			<image class="top-bg-img" :src="$xcxImg('/business/abg.png')" />
			<view class="remark">实名认证(请上传真实的信息，认证通过后将无法修改)</view>
			<view class="form">
				<view class="form-item">
					<view class="form-item-label form-require">执照号</view>
					<view class="form-item-right">
						<input type="text" placeholder="请识别您的营业执照号" disabled v-model="form.number">
						<image class="form-item-icon" :src="$xcxImg('/business/pzhao.png')" @click="upload('number')" />
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label form-require">经营范围</view>
					<view class="form-item-right">
						<input type="text" placeholder="请输入您的法定经营范围" v-model="form.scope_business">
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label form-require">店铺Logo</view>
					<image class="form-item-upload" @click="upload('logo')" v-if="!form.logo"
						:src="$xcxImg('/uo1.png')">
					</image>
					<image class="form-item-upload" @click="upload('logo')" v-else :src="$showImg(form.logo)" />
				</view>
				<view class="form-item">
					<view class="form-item-label form-require">店铺背景</view>
					<image class="form-item-upload" @click="upload('shop_bg')" v-if="!form.shop_bg"
						:src="$xcxImg('/uo1.png')">
					</image>
					<image class="form-item-upload" @click="upload('shop_bg')" v-else :src="$showImg(form.shop_bg)" />
				</view>
				<view class="form-item">
					<view class="form-item-label form-require">店铺/公司名称</view>
					<view class="form-item-right">
						<input type="text" placeholder="请输入店铺名称" v-model="form.shopname">
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label form-require">商家电话</view>
					<view class="form-item-right">
						<input type="text" placeholder="请输入商家电话号码" v-model="form.mobile">
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label form-require">店铺类型</view>
					<view class="form-item-right">
						<template v-for="(v,k) in shopType">
							<view class="flex align-center" :key="k" @click="shopTypeIndex = k">
								<image class="form-item-icon"
									:src="$xcxImg('/radio'+(k == shopTypeIndex?'':'1')+'.png')">
								</image>
								{{v.name}}
							</view>
						</template>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label form-require">店铺图片</view>

					<image class="form-item-upload" @click="upload('avatar')" v-if="!form.avatar"
						:src="$xcxImg('/uo1.png')" />
					<image class="form-item-upload" @click="upload('avatar')" v-else :src="$showImg(form.avatar)" />
				</view>
				<view class="form-item">
					<view class="form-item-label form-require">店内图片</view>
					<view class="form-item-right wrap just-end">
						<view v-for="(v,k) in form.shop_image" class="position-relative">
							<view style="right:10rpx;top:10rpx;position: absolute;z-index:10" @click="delImagesIndex('shop_image',k)">
								<uni-icons type="close" size="20" color="#f00"></uni-icons>
							</view>
							<image class="form-item-upload" :src="$showImg(v)"></image>
						</view>
						<image class="form-item-upload" v-if="form.shop_image.length < 9"
							@click="upload('shop_image',true)" :src="$xcxImg('/uo1.png')" />
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label form-require">开始时间</view>
					<picker mode="time" @change="changeTime($event,'start_time')">
						{{form.start_time || '请选择营业开始时间'}}
					</picker>
				</view>
				<view class="form-item">
					<view class="form-item-label form-require">开始时间</view>
					<picker mode="time" @change="changeTime($event,'end_time')">
						{{form.end_time || '请选择营业结束时间'}}
					</picker>
				</view>
				<view class="form-item">
					<view class="form-item-label form-require">所在区域</view>
					<view class="form-item-right" @click="selLocation">
						<view>{{form.city || '选择位置-定位'}}</view>
						<image class="form-item-icon" :src="$xcxImg('/addr.png')" />
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label form-require">详细地址</view>
					<view class="form-item-right">
						<input type="text" placeholder="请输入店铺地址" v-model="form.address">
					</view>
				</view>
				<view class="form-item column">
					<view class="form-item-label form-require">店铺简介</view>
					<textarea name="" id="" placeholder="请输入店铺简介" v-model="form.bio"></textarea>
				</view>
				<view class="form-item">
					<view class="form-item-label form-require">店铺合同</view>
					<view class="form-item-right">
						<template v-for="(v,k) in contractList">
							<view class="flex align-center" :key="k" @click="contractListindex = k">
								<image class="form-item-icon"
									:src="$xcxImg('/radio'+(k == contractListindex?'':'1')+'.png')" />
								{{v.name}}
							</view>
						</template>
					</view>
				</view>

				<view class="form-item">
					<view class="form-item-label form-require">执照照片</view>

					<image class="form-item-upload" @click="upload('image')" v-if="!form.image"
						:src="$xcxImg('/uo1.png')" />
					<image class="form-item-upload" @click="upload('image')" v-else :src="$showImg(form.image)" />
				</view>
				<view class="form-item">
					<view class="form-item-label form-require">资质许可照片</view>
					<image class="form-item-upload" @click="upload('qualification_image')"
						v-if="!form.qualification_image" :src="$xcxImg('/uo1.png')" />
					<image class="form-item-upload" @click="upload('qualification_image')" v-else
						:src="$showImg(form.qualification_image)" />
				</view>
				<view class="form-item">
					<view class="form-item-label form-require">经营者身份证正面</view>
					<image class="form-item-upload" @click="upload('id_card_frontage')" v-if="!form.id_card_frontage"
						:src="$xcxImg('/uo1.png')" />
					<image class="form-item-upload" @click="upload('id_card_frontage')" v-else
						:src="$showImg(form.id_card_frontage)" />
				</view>
				<view class="form-item">
					<view class="form-item-label form-require">经营者身份证反面</view>
					<image class="form-item-upload" @click="upload('id_card_opposite')" v-if="!form.id_card_opposite"
						:src="$xcxImg('/uo1.png')" />
					<image class="form-item-upload" @click="upload('id_card_opposite')" v-else
						:src="$showImg(form.id_card_opposite)" />
				</view>
			</view>
			<view class="btn" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import {
		applyShop
	} from '@/API/business.js'

	import {
		ocr
	} from '@/API/common.js'

	import func from '@/utils/func.js'
	import st from '@/utils/showtoast.js'
	export default {
		data() {
			return {
				form: {
					number: '', // 执照号
					scope_business:'', // 经营范围
					logo: '', // logo
					shop_bg: '', // 店铺背景
					avatar: '', // 店铺图片
					shopname: '', // 店铺/公司名称
					mobile: '', // 商家手机号
					shop_image: [], // 商家店内图片
					bio: '', // 商家简介
					start_time: '', // 开始时间
					end_time: '', // 结束时间
					city: '', // 所在区域
					address: '', // 详细地址
					shop_contract_type: '', // 是否有合同
					qualification_image: '', // 资质许可照片
					image: '', // 执照照片
					id_card_frontage: '', // 经营者身份证正面
					id_card_opposite: '', // 经营者身份证反面
				},
				shopType: [{
					name: '本地商圈',
					value: 1
				}, {
					name: '电商店铺',
					value: 2
				}],
				shopTypeIndex: 0,

				contractList: [{
					name: '无',
					value: 0
				}, {
					name: '有',
					value: 1
				}],
				contractListindex: 0,
			}
		},
		methods: {
			upload(field, arr = false) {
				func.upImage((res) => {
					if (field == 'number') {
						ocr({
							path: res.data.url,
							type: 'BusinessLicense'
						}).then(res => {
							this.form[field] = res.data.RegisterNumber
							this.form.shopname = res.data.Name
							this.form.scope_business = res.data.Business
							this.form.address = res.data.Address
							console.log('-=-=-=res', res)
						})
					} else {
						if (arr === true) {
							this.form[field].push(res.data.url)
						} else {
							this.form[field] = res.data.url
						}
					}
				})
			},
			delImg(index, field) {
				this.form[field].splice(index, 1)
			},
			changeTime(e, field) {
				let value = e.detail.value
				this.form[field] = value
			},
			submit() {
				if (!this.form.number) return st.show('请输入执照号')
				if (!this.form.scope_business) return st.show('请输入经营范围')
				if (!this.form.logo) return st.show('请上传logo')
				if (!this.form.shop_bg) return st.show('请上传店铺背景')
				if (!this.form.avatar) return st.show('请上传店铺图片')
				if (!this.form.shopname) return st.show('请输入店铺/公司名称')
				if (!this.form.mobile) return st.show('请输入商家手机号')
				if (!func.isMobile(this.form.mobile)) return st.show('商家手机号格式错误')
				if (!this.form.shop_image.length) return st.show('请上传店内图片')
				if (!this.form.bio) return st.show('请输入商家简介')
				if (!this.form.start_time) return st.show('请选择服务开始时间')
				if (!this.form.end_time) return st.show('请选择服务结束时间')
				if (!this.form.city) return st.show('请选择所在区域')
				if (!this.form.address) return st.show('请输入详细地址')
				if (!this.form.qualification_image) return st.show('请上传资质许可照片')
				if (!this.form.image) return st.show('请上传执照照片')
				if (!this.form.id_card_frontage) return st.show('请上传经营者身份证正面')
				if (!this.form.id_card_opposite) return st.show('请上传经营者身份证反面')

				// this.form.shop_image = this.form.shop_image.join(',')
				// this.form.shop_contract_type = this.contractList[this.contractListindex].value
				applyShop({
					...this.form,
					shop_image: this.form.shop_image.join(','),
					shop_contract_type: this.contractList[this.contractListindex].value
				}).then(res => {
					uni.navigateBack()
				})
			},
			selLocation() {
				uni.chooseLocation({
					success: (res) => {
						var reg = /.+?(省|市|自治区|自治州|县|区)/g;
						let myLocation = res.address.match(reg);
						let provinceName = '';
						let cityName = '';
						let countryName = '';
						if (myLocation != undefined && myLocation != null) {
							provinceName = myLocation[0];
							cityName = myLocation[1];
							countryName = myLocation[2];
						}
						this.form.city = myLocation.join('/')

					},
					fail: err => {
						console.log('-=-=-=err', err)
					}
				})
			},
			delImagesIndex(field,index){
				this.form[field].splice(index,1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 25rpx 50rpx;
		position: relative;

		.top-bg-img {
			width: 750rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1
		}

		.remark {
			font-weight: 400;
			font-size: $font-sm;
			color: $remark-color;
			line-height: 100rpx;
			text-align: center;
		}

		.form {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 29rpx;

			&-item {
				font-size: $font-big;
				display: flex;
				justify-content: space-between;
				padding: 37rpx 0;
				border-bottom: 1px solid $border-gray-color;

				picker {
					font-size: $font-base;
				}

				input {
					text-align: right;
					width: 400rpx;
				}

				textarea {
					font-size: $font-sm;
					margin-top: 20rpx;
				}

				&-upload {
					width: 180rpx;
					height: 180rpx;
				}

				&-label {
					font-weight: 400;
					font-size: $font-base;
					position: relative;
				}

				&-right {
					display: flex;
					max-width: 400rpx;
					gap: 20rpx;
					font-weight: 400;
					font-size: $font-base;

					>view {
						display: flex;
						gap: 10rpx;
					}
				}

				&-icon {
					width: 40rpx;
					height: 40rpx;
				}

				radio-group {
					display: flex;

					label {
						display: flex;
						font-size: $font-base;
					}
				}
			}

			&-require {
				padding-left: 20rpx;
			}

			&-require::before {
				content: '*';
				position: absolute;
				left: 0;
				top: 0;
				color: #f00;
			}
		}
	}

	.btn {
		width: 610rpx;
		height: 92rpx;
		background: linear-gradient(90deg, $gradient-light-color, $gradient-dark-color);
		border-radius: 46rpx;
		margin: 50rpx auto 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		font-size: 34rpx;
		color: #FFFFFF;
	}

	.wrap {
		flex-wrap: wrap;
	}
</style>
